<script setup>
  import {useRouter} from "vue-router";
  import {computed, onMounted, ref, watch} from "vue";
  import axios from "axios";
  import {useStore} from "vuex";
  import {closeToast, showLoadingToast} from "vant";

  const router = useRouter();

  const regions = ref([]);
  const cameras = ref([]);
  const regionPage = ref(1);
  const cameraPage = ref(1);
  const totalRegion = ref(0);
  const totalCamera = ref(0);
  const regionId = ref(router.currentRoute.value.params.regionId);
  const regionLoding = ref(false);
  const careraLoding = ref(false);
  const regionInfo = ref({})
  const regionPath = ref("")

  const store = useStore();
  const pageSize = ref(10);//store.state.pageSize;

  const addRegion = (arr)=>{
    Array.prototype.push.apply(regions.value,arr);
  };

  const addCamera = (arr)=>{
    Array.prototype.push.apply(cameras.value,arr);
  };

  const getCameras = (regionId, pageNo, pageSize)=>{
    careraLoding.value = true;
    axios.get("/api/getcamera/"+ regionId + "/" + pageNo + "/" + pageSize)
        .then(res=>{
          if(res.data.hasOwnProperty("code") && res.data.code == 0) //res.data.hasOwnProperty("msg") && res.data.msg === "success"
          {
            totalCamera.value = res.data.data.total;
            cameraPage.value = res.data.data.pageNo + 1;
            console.log(res.data.data)
            addCamera(res.data.data.list);
            console.log(resourseList.value)
          }
        })
        .catch(err=>{
          console.log(err);
        })
        .finally(()=>{
          careraLoding.value = false;
        })
  };

  const getRegions = (regionId, pageNo, pageSize)=>{
    regionLoding.value = true;
    const toast = showLoadingToast({
      message: '加载中...',
      forbidClick: true,
      loadingType: 'spinner',
    });
    axios.get("/api/getsubregion/" + regionId + "/" + pageNo + "/" + pageSize)
        .then(res=>{
          if(res.data.hasOwnProperty("code") && res.data.code == 0) //res.data.hasOwnProperty("msg") && res.data.msg === "success"
          {
            totalRegion.value = res.data.data.total;
            regionPage.value = res.data.data.pageNo + 1;
            addRegion(res.data.data.list);
          }
        })
        .catch(err=>{
          console.log(err);
        })
        .finally(()=>{
          regionLoding.value = false;
          closeToast();
        })
  }

  const resourseList = computed(()=>{
    return regions.value.concat(cameras.value);
  })

  const getRegionInfo = (id)=>{
    axios.get("/api/getregioninfo/" + id)
        .then(res=>{
          console.log(res.data)
          if(res.data.hasOwnProperty("code") && res.data.code == 0) //res.data.hasOwnProperty("msg") && res.data.msg === "success"
          {
            console.log(res.data.data);
            regionInfo.value = res.data.data.list[0];
            regionPath.value =regionInfo.value.name;
          }
        })
        .catch(err=>{
          console.log(err);
        })
  }

  const loading = computed(()=>{
    return regionLoding.value || careraLoding.value;
  })

  const loadResource = ()=>{
    if(totalRegion.value==0 || regions.value.length < totalRegion.value){
      getRegions(regionId.value, regionPage.value,pageSize.value);
    }
    if(totalCamera.value==0 || cameras.value.length < totalCamera.value){
      getCameras(regionId.value, cameraPage.value,pageSize.value);
    }
  }

  const clickItem = (item)=>{
    console.log(item);
    if(item.hasOwnProperty("resourceType") && item.resourceType=="camera")
    {
      console.log(item.indexCode);
      router.push({
        name: 'hkplayer',//'flvplayer', //'hkplayer',
        query: {
          cameraId: item.indexCode
        }
      })
    }
    else{
      console.log("push region")
      router.push ({
        name: 'region',
        params: {
          regionId: item.indexCode,
          path: regionInfo.value.name + ">" + item.name
        },
        query: {
          path: regionPath.value + ">" +item.name
        }
      })
      console.log(router.currentRoute.value.params.regionId)
    }
  }


  onMounted(()=>{
    console.log(router.currentRoute.value.query.regionId)
    regionId.value = router.currentRoute.value.query.regionId;
    console.log("regionId",regionId.value,typeof regionId.value);
    if(regionId.value == undefined) {
      regionId.value = router.currentRoute.value.params.regionId;
    }
    // regionId.value = router.currentRoute.value.query.regionId;
    pageSize.value = store.state.pageSize;
    console.log(router.currentRoute.value);
    if(router.currentRoute.value.query.path!=undefined)
    {
      regionPath.value = router.currentRoute.value.query.path;
    }
    else{
      getRegionInfo(regionId.value);
    }
    getRegions(regionId.value, regionPage.value,pageSize.value);
    getCameras(regionId.value, cameraPage.value,pageSize.value);
    console.log(resourseList.value);
    console.log(regions.value)
  })

</script>

<template>
  <div style="background: linear-gradient(267.64deg, #90CAFE 1.65%, #E0EEFF 94.92%);width:100%;height:4em;">
    <span style="font-size: 1.5em;color: #3399ff;margin-left: 1em;margin-top:2em;line-height: 2.5em;">平安乡村</span>
  </div>
  <van-cell-group :title="regionPath" inset>
    <van-empty v-if="resourseList.length==0" description="暂无数据" />
    <van-list v-else
        :finished="totalRegion == regions.length && totalCamera == cameras.length"
        :loading="loading"
        @load="loadResource"
    >
      <van-cell v-for="(item,index) in resourseList"
                :key = "index"
                :title="item.name"
                :icon = "item.hasOwnProperty('resourceType') && item.resourceType=='camera'?'video-o':'idcard'"
                size = "large"
                @click="clickItem(item)"
      >
        <template #right-icon>
          <van-icon v-if="!item.hasOwnProperty('resourceType')" name="arrow"></van-icon>
        </template>
      </van-cell>
    </van-list>
  </van-cell-group>

</template>

<style scoped>

</style>